<template>
	<view class="content">
		<view class="top">
			<view class="box">
				<view class="avatar">
					<view class="avatar-left" @click="changeUser">
						<view class="avatar-img">
							<template v-if="memberhome.avatar">
								<u-avatar style="border: 1rpx solid #ff5500;" :src="memberhome.avatar" size="80"></u-avatar>
							</template>
							<template v-else>
								<u-avatar style="border: 1rpx solid #ff5500;" :src="avatar" size="80"></u-avatar>
							</template>
						</view>
						<view class="avatar-name">
							<view class="avatar-name-top">
								{{memberhome.nick||memberhome.mobile}}
							</view>
							<view class="avatar-name-bottom orange-text" v-if="memberhome.is_agent">
								创始人
							</view>
							<view class="avatar-name-bottom" v-else>
								推荐人：{{memberhome.pid_nick}}
							</view>
						</view>
					</view>
					<view class="avatar-right" @click="goInvited">
						<text class="icon-qrcode iconfont" style="font-size: 100rpx;"></text>
						<text class="text-box">分享码</text>
					</view>
				</view>
				<view class="withdrawal">
					<view class="withdrawal-top">
						<view class="withdrawal-top-left">
							总积分
						</view>
						<view class="withdrawal-top-right">
							<view class="withdrawal-btn" @click="goCash">
								提现
							</view>
						</view>
					</view>
					<view class="withdrawal-intermediate">
						{{memberhome.amount}}
					</view>
					<view class="withdrawal-bottom" @click="goWithdrawal">
						<view class="withdrawal-bottom-left">
							<view class="withdrawal-bottom-text">
								已提现积分
							</view>
							<view class="withdrawal-bottom-amount">
								{{memberhome.pay_amount}}
							</view>
						</view>
						<view class="withdrawal-bottom-right">
							<view class="withdrawal-bottom-text">
								待审核积分
							</view>
							<view class="withdrawal-bottom-amount">
								{{memberhome.unset_amount}}
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="menu">
					<u-grid :border="false" col="3">
						<u-grid-item style="margin-bottom: 30rpx;" v-for="(item,index) in baseList" :key="index" @click="clickGrid(item.type)" >
							<view class="grid-img">
								<u--image :showLoading="true" :src="item.name" width="50rpx" height="50rpx"></u--image>
							</view>
							<text class="grid-text">{{item.title}}</text>
						</u-grid-item>
						<u-grid-item style="margin-bottom: 30rpx;" v-if="memberhome.is_agent" @click="clickGrid('teamdividends')">
							<view class="grid-img">
								<u--image :showLoading="true" src="/static/img/team_dividends.png" width="50rpx"
									height="50rpx"></u--image>
							</view>
							<text class="grid-text">团队分红</text>
						</u-grid-item>
						<u-grid-item style="margin-bottom: 30rpx;" @click="openkefu">
							<view class="grid-img">
								<u--image :showLoading="true" src="/static/img/withdrawal.png" width="50rpx"
									height="50rpx"></u--image>
							</view>
							<text class="grid-text">联系客服</text>
						</u-grid-item>
						<u-grid-item style="margin-bottom: 30rpx;" @click="changeUser">
							<view class="grid-img">
								<u--image :showLoading="true" src="/static/img/withdrawal.png" width="50rpx"
									height="50rpx"></u--image>
							</view>
							<text class="grid-text">个人设置</text>
						</u-grid-item>
						<u-grid-item style="margin-bottom: 30rpx;" @click="passwordClick">
							<view class="grid-img">
								<u--image :showLoading="true" src="/static/img/withdrawal.png" width="50rpx"
									height="50rpx"></u--image>
							</view>
							<text class="grid-text">修改密码</text>
						</u-grid-item>
					</u-grid>
					<view class="exit">
						<view class="exit_btn" @click="loginOut">
							退出登录
						</view>
						<!-- <view class="del_btn" @click="showDel">
							注销账号
						</view> -->
					</view>
					
				</view>
			</view>
			
		</view>
		<view class="service-list">
			<text class="grid-text" @click="linkurl('1')">服务协议</text>
			<text class="grid-text" @click="linkurl('2')">隐私协议</text>
		</view>
		<u-modal :show="kefuModal"  title="联系客服" @confirm="kefuModal = false" @cancel="kefuModal=false">
			<view class="slot-content">
				<view class="inner">
					<view class="online">在线时间：{{kefuData.online_time}}</view>
					<view class="phone">联系电话：{{kefuData.phone}}</view>
					<!-- <view class="image-box">
						<view>微信二维码</view>
						<u--image :src="kefuData.qrcode" width="200rpx" height="200rpx"></u--image>
					</view> -->
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		removeToken
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				memberhome: {},
				settingData: {},
				kefuData: {},
				avatar:'',
				kefuModal:false,
				baseList: [
					{
						additional: '0.00',
						name: '/static/img/withdrawal.png',
						title: '收益明细',
						type:"cash"
					},
					{
						name: '/static/img/real_name.png',
						title: '实名认证',
						type:"realname"
					},
					{
						name: '/static/img/my_team.png',
						title: '我的团队',
						type:"team"
					},
					{
						name: '/static/img/distribution_orders.png',
						title: '分销订单',
						type:"sale"
					},
					{
						name: '/static/img/distribution_ranking.png',
						title: '分销排行',
						type:"ranking"
					},
					
				],
			}
		},
		onShow() {
			this.getMemberHome()
			this.settingData = uni.getStorageSync('settingData')
			if(this.settingData){
				this.kefuData= this.settingData.value
				this.avatar = this.settingData.image
			}
		},
		methods: {
			changeUser(){
				console.log('11111')
				uni.navigateTo({
					url:'/pages/person/my/setting'
				})
			},
			openkefu(){
				this.kefuModal= true
				// uni.showModal({
				// 	title:"联系客服",
				// 	content:'客服电话' + this.settingData.value.phone +'<br/>'+'在线时间'+this.settingData.value.online_time
				// })
			},
			linkurl(type) {
				let url = ''
				if (type == 1) {
					// https://app.fjxmlz.com/htmls/static/lianzhong.apk
					url = "https://app.fjxmlz.com/htmls/static/service.html"
				} else {
					url = "https://app.fjxmlz.com/htmls/static/privacy.html"
				}
				uni.navigateTo({
					url: "/pages/webpage/webpage?link=" + url
				})
			},
			goWithdrawal(){
				uni.navigateTo({
					url: '/pages/person/my/withdrawal'
				})
			},
			passwordClick(){
				uni.navigateTo({
					url: '/pages/person/my/modify'
				})
			},
			clickGrid(type) {
				switch(type){
					case "sale":
						uni.navigateTo({
							url: '/pages/person/my/distributionOrder'
						})
						break;
					case "cash":
						uni.navigateTo({
							url: '/pages/index/myintegral/myintegral'
						})
						break;	
					case "team":
						uni.navigateTo({
							url: '/pages/person/my/team'
						})
						break;	
					case "password":
						uni.navigateTo({
							url: '/pages/person/my/modify'
						})
						break;		
					case "ranking":
						uni.navigateTo({
							url: '/pages/person/my/ranking'
						})
						break;
					case "realname":
						uni.navigateTo({
							url: '/pages/person/my/realName'
						})
						break;
					case "teamdividends":
						uni.navigateTo({
							url: '/pages/person/my/teamdividends'
						})
						break;					
				}
				// } else if (name == 7) {
				// 	uni.navigateTo({
				// 		url: '/pages/person/my/realName'
				// 	})
				
			},
			teamDividends(){
				uni.navigateTo({
					url: '/pages/person/my/teamdividends'
				})
			},
			
			loginOut() {
				let loginForm ={}
				this.$api.loginOut().then(res => {
					removeToken()
					uni.getStorage({
						key:'loginForm',
						success: (res) => {
							loginForm = res.data
							uni.removeStorageSync('idCardForm')
							uni.removeStorageSync('addressForm')
							uni.clearStorage()
							uni.setStorage({
								key:'loginForm',
								data:loginForm,
								success: () => {
									uni.redirectTo({
										url: '/pages/login/login'
									})
								}
							})
						}
					})
				})
			},
			goInvited() {
				uni.navigateTo({
					url: '/pages/person/my/invited'
				})
			},
			close() {
				this.$refs.popup.close()
			},
			
			goCash() {
				uni.navigateTo({
					url: '/pages/person/my/cash'
				})
			},
			getMemberHome() {
				console.log('memberhome')
				this.$api.memberhome().then(res => {
					this.memberhome = res.data
					// if(this.memberhome.avatar && !this.memberhome.avatar.includes('http')){
					// 	this.memberhome.avatar = this.$store.state.user.baseURL + this.memberhome.avatar
					// }
					uni.setStorageSync('memberHome',res.data)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		padding-top: 114rpx
	}

	.content {
		background: url('@/static/img/bg.png');
		min-height: 100vh;
		z-index: -1;

		.box {
			padding: 0 30rpx;
		}
	}

	.avatar {
		display: flex;
		justify-content: space-between;
		padding-bottom: 32rpx;

		.avatar-left {
			display: flex;
			justify-content: space-between;
			
			.avatar-name {
				padding: 16rpx 0 0 32rpx;

				.avatar-name-top {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #111111;
					font-weight: bold;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					margin-bottom: 30rpx;
				}

				.avatar-name-bottom {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
				.orange-text{
					height: 70rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #EA6F29;
				}
			}
		}

		.avatar-right {
			padding-top: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100rpx;
			text-align: center;
			align-self: center;
			.text-box{
				font-size: 32rpx;
			}
		}
	}

	.withdrawal {
		// height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx;

		.withdrawal-top {
			display: flex;
			justify-content: space-between;

			.withdrawal-top-left {
				padding-top: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #111111;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.withdrawal-top-right {
				.withdrawal-btn {
					width: 120rpx;
					height: 70rpx;
					background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
					border-radius: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 70rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}

		.withdrawal-intermediate {
			padding-top: 12rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 68rpx;
			color: #E85D0E;
			line-height: 90rpx;
			text-align: left;
			font-style: normal;
		}

		.withdrawal-bottom {
			padding-top: 28rpx;
			display: flex;
			justify-content: space-between;

			.withdrawal-bottom-right {
				padding-left: 120rpx;
			}

			.withdrawal-bottom-left,
			.withdrawal-bottom-right {
				// display: flex;
				flex: 1;
				.withdrawal-bottom-text {
					flex: 1;
					padding-right: 12rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #999999;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.withdrawal-bottom-amount {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #E85D0E;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					margin: 20rpx 0;
				}
			}
		}
	}
	
	
	
	.menu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 10rpx 20rpx 30rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF, rgba(255, 255, 255, 0) 100%);
		border-radius: 20rpx;

		.grid-img {
			padding-bottom: 20rpx;
			padding-top: 30rpx;
		}

		.grid-text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}

		.additional {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
		}

		.exit {
			margin: 40rpx auto 0;
			padding-bottom: 50rpx;

			.exit_btn {
				width: 590rpx;
				height: 84rpx;
				background: #FF8484;
				border-radius: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				font-style: normal;
			}
			.del_btn{
				width: 100%;
				height: 84rpx;
				background: none;
				font-size: 28rpx;
				color: #a8a8a8;
				line-height: 84rpx;
				text-align: center;
				margin-top: 20rpx;
			}
		}
		
	}

	.cancellation-popup {
		width: 400rpx;
		height: 200rpx;
		background-color: white;
		border-radius: 15rpx;
		padding: 30rpx;

		.popup-title {}

		.popup-btn {
			padding-top: 60rpx;
			display: flex;
			justify-content: space-between;

			.popup-btn-ok,
			.popup-btn-no {
				width: 180rpx;
				height: 64rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
			}

			.popup-btn-ok {
				background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
				border-radius: 16rpx;
				color: #FFFFFF;
			}

			.popup-btn-no {
				border-radius: 16rpx;
				border: 1rpx solid #EA6F29;
				color: #EA6F29;
			}
		}
	}
	.slot-content{
		.inner{
			font-size: 36rpx;
			line-height: 42rpx;
		}
	}
	.service-list{
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 0 0 60rpx;
		.grid-text{
			color: #7b86a1;
			text-decoration: underline;
			font-size: 32rpx;
			font-weight: normal;
			
			&:first-of-type{
				margin-right: 30rpx;
			}
		}
	}
</style>